<template>
	<view>
		<view class="Box" v-for="(item, index) in DataList" :key="index">
			<view class="Item" v-if="!item.hide">
				<view class="IL">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="IR">
					<view class="Name">{{item.name}}</view>
					<view class="Price">
						<text>{{item.sell_balance}}</text>元+<text>{{item.sell_point}}</text>积分+<text>{{item.sell_jinbi}}</text>抵用券
					</view>
					<view style="color: #fff;font-weight: bold;margin-bottom: 10rpx;">
						库存：<text>{{item.num}}</text>
					</view>
					<view class="BuyBtn" @click="GoBuy(item.order_id,item.goods_id)">立即购买</view>
				</view>
			</view>
		</view>
		<!-- 加载提示 -->
		<view v-if="isLoading" class="load-more">正在努力加载中...</view>
		<!-- <jh-tabbar /> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				DataList: [],
				id: -1,
				isLoading: false, // 是否正在加载中
			};
		},
		onShow() {
			this.connectSocket();
			this.page = 1
			this.DataList = []
			this.getData(this.id);
		},
		onHide() {
			this.closeSocket();
		},
		onLoad(o) {
			this.id = o.id
		},
		onUnload() {
			this.closeSocket();
		},
		methods: {
			// 开启socket
			connectSocket() {
				let that = this;
				uni.connectSocket({
					url: 'ws://47.92.193.240:30001'
				});
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketMessage(function(res) {
					that.getSocketMessage(res);
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},

			// 关闭socket
			closeSocket() {
				uni.closeSocket()
			},
			// 发送消息
			sendSocketMessage(msg) {
				console.log(msg);
				msg = JSON.stringify(msg)
				uni.sendSocketMessage({
					data: msg
				});
			},
			// 接收消息
			getSocketMessage(msg) {
				console.log(msg);
				let data = JSON.parse(msg.data)
				switch (data.method) {
					case "delorder":
						let index = this.DataList.findIndex(function(item) {
							if (item.order_id == data.order_id)
								return true;
						})
						if (index >= 0) {
							this.DataList[index].hide = 1;
						}
						break;
					default:
						console.log(data);
						break;
				}
			},
			// 获取数据
			getData(e) {
				this.isLoading = true; // 开始加载
				this.$api.actlist({
					page: this.page,
					limit: 20,
				}, res => {
					this.DataList = this.DataList.concat(res.data); // 将新的数据追加到数组中
					this.isLoading = false; // 加载完成
				})
			},
			// 跳转到购买页面
			GoBuy(e, i) {
				uni.navigateTo({
					url: '/pages/goods/index/index2?id=' + e + '&gid=' + i
				});
			},
			// 监听下拉刷新事件
			onPullDownRefresh() {
				this.page = 1;
				this.DataList = [];
				this.getData();
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			// 监听上拉加载更多事件
			onReachBottom() {
				this.page++;
				this.getData();
			}
		},
	}
</script>
<style lang="scss" scoped>
	.Box {
		.Item {
			margin: 20rpx 30rpx;
			padding: 15rpx;
			display: flex;
			background: #202126;
			border-radius: 20rpx;

			.IL {
				margin-right: 20rpx;

				image {
					width: 252rpx;
					height: 252rpx;
					border-radius: 20rpx;
				}
			}

			.IR {
				.Name {
					font-weight: bold;
					color: #FFFFFF;
					margin: 18rpx 0 11rpx;
				}

				.Price {
					color: #F2D7AA;
					font-size: 24rpx;
					font-weight: 400;
					margin-bottom: 20rpx;

					text {
						font-weight: bold;
						font-size: 32rpx;
					}
				}

				.BuyBtn {
					width: 207rpx;
					height: 54rpx;
					border-radius: 10rpx;
					color: #181818;
					background: #edd1a2;
					text-align: center;
					line-height: 54rpx;
				}
			}

		}
	}
</style>